\documentclass[a4paper,10pt]{article}
\usepackage[a4paper, left=3.5cm,right=3cm]{geometry}

\usepackage[latin1]{inputenc}
\usepackage{verbatim}
\usepackage{textcomp}
\usepackage{amsmath}
\usepackage[T1]{fontenc}
\usepackage{graphicx}


% Para tener cabecera y pie de p\'agina con un estilo personalizado.
\usepackage{fancyhdr}

% Codificaci\'on UTF-8
%\usepackage[utf8]{inputenc}

% Tamaño de p\'agina y m\'argenes.
%\usepackage[a4paper,headheight=16pt,scale={0.75,0.8},hoffset=0.5cm]{geometry}
%\usepackage[spanish]{babel}

% Para poner imagenes es asi:
%\begin{figure}[!htb]
%\includegraphics[scale = 0.5]{graficoangulos}
%\caption{linea debajo de la imagen.} \label{angulos_grafico}
%\end{figure}


\begin{document}

\tableofcontents
\newpage


\section{Requerimientos de software}
La aplicaci\'on fue desarrollada para correr en distribuciones basadas en GNU/Linux. Para instalar el programa se debe contar con las 
librerias gtkmm-2.4 y libxml-2.6. o versiones posteriores. Adem\'as se debe contar con el programa make y el g++ (utilizado por el anterior), 
para compilar la aplicaci\'on.

\section{Descripci\'on general}
El presente trabajo tiene como objetivo poner en pr\'actica los conocimientos adquiridos hasta el momento, articul\'andolos en un trabajo grupal.
Se trata de una aplicaci\'on gr\'afica que despliegue un tablero blanco sobre el cual se combinar\'an
atributos, entidades, relaciones, jerarqu\'ias y subdiagramas
para lograr un nuevo diagrama de Entidad-Relaci\'on.

\section{Patrones implementados}
\subsection{MVC}
Divide la aplicaci\'on interactiva en 3 \'areas: procesamiento, salida y entrada. \\
Para esto, utilizamos las siguientes abstracciones: \\
\begin{enumerate}
 \item Modelo(Model): Encapsula los datos y las funcionalidades. El modelo es independiente de cualquier representaci\'on de salida y/o comportamiento de entrada.   
 \item Vista(View): Muestra la informaci\'on al usuario. Cada vista tiene asociado un componente controlador. 
 \item Controlador(Controller): Reciben las entradas, usualmente como eventos que codifican los movimientos o pulsaci\'on de botones del rat\'on, uso del teclado. 
Los eventos son traducidos a solicitudes para el modelo o la vista. 
\end{enumerate}

\subsection{Composite}
El patr\'on Composite nos sirve para construir objetos complejos a partir de otros más simples y similares entre s\'i, gracias a la composici\'on recursiva y a una estructura en forma de \'arbol. Esto simplifica el 
tratamiento de los objetos creados, ya que al poseer todos ellos una interfaz com\'un, se tratan todos de la misma manera.

\section{M\'odulos}

\subsection{Capa de interfaz gr\'afica}
La interfaz gr\'afica cuenta de una ventana principal que se compone b\'asicamente de:
\begin{enumerate}
 \item Una secuencia de tabs con un \'area de dibujo cada uno, donde se van agregando los componentes del diagrama para su visualizaci\'on y edici\'on.
 \item Una barra de herramientas con los distintos componentes.
 \item Una barra de men\'u con diversas acciones como abrir archivo, guardar, imprimir, etc.
\end{enumerate}
Los manejadores de eventos (handlers) son los encargados de comunicar y gestionar la ocurrencia de cada evento en particular. \\

\underline{\textbf{DrawingAreaPlusPlus }}
Clase que encapsula el widget Drawing Area de gtk y le agrega la funcionalidad necesaria para dibujar componentes visuales relativos al diagrama. 
En todo momento, contiene un handler que abstrae el comportamiento que debe realizarse de acuerdo a la sucesi\'on de eventos ocurridos durante la 
interacci\'on con el usuario. Se encarga de recibir todos los eventos y los redirecciona al handler actual, como por ejemplo el click derecho o 
izquierdo del mouse.
Contiene una lista de VisualCompositeComponents que recorre para dibujar cada vez que se le avisa de alguna modificaci\'on en los mismos mediante 
el m\'etodo reDraw. \\
Ofrece el m\'etodo getTouchedVisualComponents para obtener el componente visual correspondiente a una posici\'on dada. Para ello, utiliza una serie
de c\'alculos, donde verifica la intersecci\'on con las \'areas de influencia de los componentes.
Adem\'as dibuja un \'area de selecci\'on y l\'ineas correspondientes a conexiones en proceso de creaci\'on, seteando los atributos correspondientes.

\underline{\textbf{Workspace}}
Esta clase hereda de DrawingAreaPlusPlus agreg\'andole la funcionalidad adicional requerida para la interfaz del diagrama. Encapsula al diagrama y 
provee los m\'etodos para imprimir, guardar y levantar el mismo.

% \begin{figure}[!htb]
% \includegraphics[scale = 0.6]{drawinarea.png}
% \caption{Drawing Area.} \label{drawArea}
% \end{figure}
\begin{center}
 \includegraphics[width=14cm,height=11cm]{./drawinarea.png}
 % componentes.png: 1237x888 pixel, 72dpi, 43.64x31.33 cm, bb=0 0 1237 888
\end{center}

\underline{\textbf{BarraDeHerramientas}}
Clase que contiene los botones de los componentes del diagrama, los cuales al ser presionados establecen un HandlerCreateComponent en el DrawingArea
que se encarga de crear el componente elegido, seg\'un el bot\'on que se haya presionado, utilizando una funci\'on template.

\underline{\textbf{BarraDeMenu}}
Contiene el grupo de acciones y de botones asociados a ellas. Redirecciona un grupo de estas acciones al Workspace, tales como imprimir, abrir, 
guardar, exportar, etc. Otras acciones como borrar, entre otras, son redireccionadas al handler actual en el Workspace.

\subsubsection{Componentes visuales}
\textbf{VisualComponent}
Es una interfaz que deben cumplir los distintos componentes para poder ser dibujados y manejados por el DrawingArea. Por ejemplo, define m\'etodos como:
\begin{itemize}
 \item on\_expose y draw para dibujar el componente de acuerdo a su estado actual, por ejemplo seleccionado o no. 
 \item getInfluenceArea y otras funciones relativas a las proporciones y pociones de los componentes visuales, para permitir la l\'ogica de intersecciones
entre componentes (como cuando una l\'inea es dejada sobre un componente) y eventos del mouse.
 \item on\_move para cambiar la posici\'on del componente visual.
\end{itemize}
\textbf{VisualCompositeComponent}
Hereda de VisualComponent y agrega la funcionalidad especializada en componentes compuestos del diagrama. Posee una colecci\'on de otros elementos visules 
tales como los conectores en un elemento o los segmentos en una l\'inea. Adem\'as de implementar algunos m\'etodos del padre, agrega m\'etodos mas espec\'ificos 
como serializar y mostrar propiedades. 
\begin{itemize}
 \item VisualComponentAttribute
 \item VisualComponentEntity
 \item VisualComponentForkVia
 \item VisualComponentRelation
 \item VisualComponentSubdiagram
 \item VisualComponentVia
\end{itemize}

% \begin{figure}[!htb]
% \includegraphics[scale = 0.6]{componentes.png}
% \caption{Componentes visuales.} \label{visualcomp}
% \end{figure}
\begin{center}
 \includegraphics[width=15cm,height=10cm]{./componentes.png}
 % componentes.png: 1237x888 pixel, 72dpi, 43.64x31.33 cm, bb=0 0 1237 888
\end{center}


Basicamente, los componentes visuales difieren en la forma en que se dibujan y en el \'area de influencia. Adem\'as, como es de esperar, se diferencian en el
componente l\'ogico del modelo que encapsulan.
En algunos casos agregan un comportamiento distinto, como en el VisualComponentVia y VisualComponentSubdiagram.
La visual correspondiente a la via posee segmentos (que tambi\'en son componentes visuales), a diferencia de los dem\'as que poseen conectores. Tiene m\'etodos
que permiten el trazado autom\'atico de las l\'ineas ortogonalmente, asi como la uni\'on de dos segmentos cuando existe un tercero entre medio de escasa longitud.
En el caso de VisualComponentSubdiagram se modifica la forma en que se crea el objeto, ya que los subdiagramas deben obtener sus atributos a partir de otro
diagrama ya creado. 

Existen otros componentes visuales que componen a los VisualCompositeComponent antes mencionados:
\begin{itemize}
 \item VisualComponentConnector: la funcionalidad mas importante del VisualComponentConnector es permitir la conexion entre un componente y una via y transmitir
los eventos entre los mismos, tales como el movimiento.
 \item VisualComponentSegment: encapsula los datos necesarios para el trazado autom\'atico de las vias, tales como longitud, si es vertical y si es movible. 
Estos \'ultimos datos se utilizan para diferenciar entre los casos en que una via debe seguir al componente al que esta conectado y el caso en que ambos componentes
de la via se muevan al mismo tiempo en cuyo caso las vias no se deben extender, sino moverse manteniendo su forma.
\end{itemize}


\subsubsection{Ventanas}
\underline{\textbf{VentanaPrincipal}}
Basicamente esta ventana no es mas que un contenedor de la barra de herramientas, la barra de men\'u y los tabs. Estos \'ultimos corresponden a los diferentes 
workspaces de trabajo. Es decir que permiten la edici\'on de varios diagramas a la vez. Posee m\'etodos que permiten crear, guardar, abrir y cambiar nombre al 
diagrama del tab actual, asi como agregar nuevos tabs.

% \begin{figure}[!htb]
% \includegraphics[scale = 0.6]{ventanaprincipal.png}
% \caption{Ventana principal.} \label{ventprin}
% \end{figure}
\begin{center}
 \includegraphics[width=15cm,height=9cm]{./ventana principal.png}
 % componentes.png: 1237x888 pixel, 72dpi, 43.64x31.33 cm, bb=0 0 1237 888
\end{center}


\subsubsection{Manejadores de eventos}
Los manejadores de eventos (handlers) encapsulan el estado de lo acontecido recientemente y en base a ello definen el comportamiento frente a un evento. 
Por ejemplo, si se recibe el evento de on\_release\_left\_click, el HandlerConnectComponent intentara buscar un conector para crear la via y conectar los 
dos componentes, mientras que el HandlerSelected en el caso de estar moviendo un componente lo dejar\'a en la posici\'on correspondiente al evento. Estos 
handlers heredan de la clase Handler, que define la interfaz necesaria para recibir los mensajes de los eventos que env\'ia el Workspace, la barra de 
herramientas y los tabs.
A continuaci\'on se listan los diferentes handlers y una breve explicaci\'on de sus comportamientos.
\begin{itemize}
 \item HandlerDefault: es el encargado de decidir cual es el pr\'oximo handler que pasar\'a a recibir los eventos, seg\'un el evento que recibe. 
 \item HandlerCreateComponent: recibe como par\'ametro un componente visual creado por el bot\'on correspondiente en la barra de herramientas. Mueve el componente
hasta la posici\'on donde se lo suelta y agrega el mismo a la colecci\'on de la DrawingArea y al diagrama en cuesti\'on.
 \item HandlerCreateSelection: este handler es habilitado por el handlerDefault cuando se hace click en una posici\'on donde no se encuentra ning\'un componente
con el fin de que cuando reciba la se\~nal de release del click izquierdo crear una colecci\'on con todos los componentes que quedaron encerrados en el cuadro
de selecci\'on. Este \'ultimo, se va dibujando mientras se recibe la se\~nal on\_motion\_notify.
 \item HandlerSelected: recibe una colecci\'on de componentes visuales seleccionados y de acuerdo a los eventos posteriores decide que acci\'on aplicar sobre la
misma. Por ejemplo: si se hace click derecho se muestra un men\'u desplegable, donde se pueden elegir acciones como copiar, cortar, borrar y propiedades.
 \item HandlerConnectComponent: al hacer click sobre un conector, se habilita este handler, que se encarga de dibujar una l\'inea hasta el punto donde se suelta
el click, verificando en esa posici\'on si existe otro conector, para lograr una conexi\'on exitosa y crear la via, agreg\'andola al diagrama y a la colecci\'on de
componentes visuales en el DrawingArea.
 \item HandlerEditSegment: se habilita este handler haciendo click sobre un segmento y permite arrastrar el mismo, modificando los segmentos adyacentes cuando
es necesario.
\end{itemize}

% \begin{figure}[!htb]
% \includegraphics[scale = 0.6]{handler.png}
% \caption{Estructura de manejadores de eventos.} \label{handler}
% \end{figure}
\begin{center}
 \includegraphics[width=15cm,height=11cm]{./handler.png}
 % componentes.png: 1237x888 pixel, 72dpi, 43.64x31.33 cm, bb=0 0 1237 888
\end{center}



\subsection{Capa de xml}
En esta capa encontramos las clases necesarias para levantar y persistir los diagramas en archivos XML.\\

\begin{center}
 \includegraphics[width=12cm,height=6cm]{./xml.png}
 % componentes.png: 1237x888 pixel, 72dpi, 43.64x31.33 cm, bb=0 0 1237 888
\end{center}

Los diagramas y sus funcionalidades seran almacenados en dos XML 



% <Entidad id\sim nombre\sim tipo>	\\
%   <Atributo id\sim nombre\sim cardmin\sim cardmax> \\
%     <atributo> \\
%   <\setminus Atributo> \\
%   <Identificador   \\
%     <1> 	\\
%       idAtributo1;idAtributo2;idEntidadDebil   \\
%     <\setminus 1>  \\
%     <\setminus 2>  \\
% <\setminus Entidad>


<diagram name="test1" sizex="454" sizey="343">  \\
  <atributo name="atributo0" x="406" y="200" id="0"/> \\
  <atributo name="atributo1" x="613" y="196" id="1"/> \\
  <entidad name="entidad" x="500" y="315" id="2"/> \\
  <Via name="Via" x="411" y="205" nroSalida="0" id="3">\\
    <Punto x="414" y="208" movible="0"/> \\
    <Punto x="521" y="318" movible="0"/> \\
  </Via> \\
  <Via name="Via" x="618" y="201" nroSalida="0" id="4">\\
    <Punto x="621" y="204" movible="0"/> \\
    <Punto x="545" y="318" movible="0"/> \\
  </Via> \\
  <at_compuesto name="at_compuesto" x="707" y="315" id="5"/> \\
  <relacion name="relacion" x="493" y="418" id="6"/> \\
  <entidad name="entidad" x="492" y="513" id="7"/> \\
  <Via name="Via" x="523" y="511" nroSalida="0" id="8"> \\
    <Punto x="537" y="516" movible="0"/> \\
    <Punto x="529" y="516" movible="1"/> \\
    <Punto x="529" y="445" movible="1"/> \\
    <Punto x="533" y="445" movible="0"/> \\
  </Via> \\
  <Via name="Via" x="542" y="424" nroSalida="0" id="9"> \\
    <Punto x="545" y="427" movible="0"/> \\
    <Punto x="538" y="427" movible="1"/> \\
    <Punto x="538" y="342" movible="1"/> \\
    <Punto x="540" y="342" movible="0"/> \\
  </Via> \\
  <Via name="Via" x="708" y="337" nroSalida="0" id="10"> \\
    <Punto x="711" y="340" movible="0"/>  \\
    <Punto x="559" y="342" movible="0"/> \\
  </Via> \\
</diagram> \\

% \subsection{Capa de negocios}

\subsection{Modelo de diagramas}

% \subsubsection{Diagrama de clases}
\subsubsection{Diagrama}
Clase b\'asica del modelo l\'ogico de la aplicaci\'on. Se encarga de contener todos los componentes del diagrama y permitir su edici\'on.
Un diagrama sabe dibujarse, serializarse y levantarse completamente de un xml. 

\begin{center}
 \includegraphics[width=15cm,height=8cm]{./diagram.png}
 % componentes.png: 1237x888 pixel, 72dpi, 43.64x31.33 cm, bb=0 0 1237 888
\end{center}

\subsubsection{Componente}
 Clase que establece la interfaz de todos los elementos que puede contener un diagrama. Los conectores se encargan de mantener correctamente conectada 
una l\'inea a sus componentes. Los componentes disponibles son:
\begin{itemize}
 \item Attribute
 \item Entity
 \item Relation
 \item Connector
 \item Segment
 \item Fork: Permite la bifurcaci\'on de una via
 \item Via: Conecta dos componentes y contiene una lista de puntos para determinar su trazado
 \item Subdiagrama: constituido por otro diagrama ya creado
\end{itemize}


% \begin{figure}[!htb]
% \includegraphics[scale = 0.6]{componentes.png}
% \caption{Estructura de Componentes.} \label{comp}
% \end{figure}

\begin{center}
 \includegraphics[width=15cm,height=8cm]{./componentes.png}
 % componentes.png: 1237x888 pixel, 72dpi, 43.64x31.33 cm, bb=0 0 1237 888
\end{center}


% \subsubsection{Diagrama de arquitectura}


\end{document}
